<template>
	<div class="HomeErjiCategory">
		<div style="width:100%; position:relative;height: 2.2rem;" ref="navhead" v-show="bannershow" @touchstart="stopSlid">
			<ul>
				<li v-for="(item,index) in erjiCategory" :key="index" @click="clickitem(item,index)" ref="titleLi">
					<span :class="{activ:index==arrindex}">{{item.goodsClassName}}</span>
				</li>
				<li @click="zankai" v-if="erjiCategory.length>6">
					<span style="color: rgb(41, 154, 40);">展开<i class="erjizankai"></i></span>
				</li>
			</ul>
		</div>
		<div class="uldiv" v-show="!bannershow">
			<span v-for="(item,index) in erjiCategory" :key="index" @click="clickitem(item,index)" :class="{activ:index==arrindex}">{{item.goodsClassName}}</span>
			<span v-if="erjiCategory.length>6" style="color: rgb(41, 154, 40);" @click="shouqi">
		    	收起
		    	<i class="erjisouqi"></i>
		    </span>
		</div>
	</div>
</template>

<script>
	import { MessageBox } from '@/ui-components';
	import { Toast } from "../../utils/toast.js";
	/*import Banner from '../../real-components/BannerScroll';*/
	import BScroll from 'better-scroll'
	export default {
		props: {
			erjiCategory: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				arrindex: 0,
				bannershow: true,
				scroll: null,
			}
		},
		components: {
			/*Banner*/
		},
		methods: {
			stopSlid() {
				this.$store.commit('xxy/setstoptouch', false)
			},
			clickitem(item, index) {
				this.arrindex = index
				this.$emit('getgoodscodedata', item.goodsClassCode)
			},
			shouqi() {
				this.bannershow = true;
				if(this.arrindex>2){
					this.tapMove(this.arrindex)
				}
			},
			zankai() {
				this.bannershow = false
			},
			//tap栏滚动
			tapMove(newData, time) {
				var scrollLeft
				/*var testDiv = this.$refs.titleLi
				var index = newData
				var activeTitle = testDiv ? testDiv[index] : ''
				var outerWidth = this.$refs.navhead ? this.$refs.navhead.offsetWidth : 375
				if(!activeTitle) {
					return
				}
				scrollLeft = Math.max(0, activeTitle.offsetLeft - outerWidth / 2 + activeTitle.offsetWidth / 2)
				scrollLeft = Math.min(scrollLeft, this.scroll.scrollerWidth - outerWidth)*/
				scrollLeft = newData * 60
				time = time == 0 || time ? time : 500
				this.scroll.scrollTo(-scrollLeft, 0, time, "easing")
			}

		},
		computed: {

		},
		watch: {
			arrindex(newData){
				if(newData>2){
					this.tapMove(newData)
				}
			}
		},
		mounted() {
			var scroll = new BScroll(this.$refs.navhead, {
				startX: 0,
				startY: 0,
				scrollX: true,
				scrollY: false,
				stop: true,
				freeScroll: true,
				momentum: true,
				bounce: false,
			})
			this.scroll = scroll
		},
		updated() {
			this.scroll && this.scroll.refresh()
		},
	}
</script>

<style>
	.HomeErjiCategory {
		background: #fff;
		text-align: left;
	}
	
	.HomeErjiCategory ul {
		float: left;
		display: flex;
		min-width: 100%;
		padding: 0.5rem 0.5rem 0.25rem 0.5rem;
		position: relative;
	}
	
	.HomeErjiCategory ul li {
		width: 25%;
	}
	
	.HomeErjiCategory .uldiv {
		padding: 0.5rem 0.5rem 0.25rem 0.5rem;
	}
	
	.HomeErjiCategory span {
		display: inline-block;
		font-size: 0.7rem;
		padding: 0.15rem;
		margin: 0.2rem 0.1rem;
		border: 1px solid #eaeaea;
		border-radius: 0.3rem;
		min-width: 3rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.activ {
		color: #38B331;
		border-color: rgba(41, 154, 40, 0.3)!important;
		background: rgba(41, 154, 40, 0.1);
	}
	
	.erjisouqi {
		border-left: 2px solid #299a28;
		border-top: 2px solid #299a28;
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-left: 0.2rem;
	}
	
	.erjizankai {
		border-right: 2px solid #299a28;
		border-bottom: 2px solid #299a28;
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-left: 0.2rem;
	}
</style>